<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('修改章节信息')}" />
    <th:block th:insert="~{include :: datetimepicker-css}" />
    <th:block th:insert="~{include :: summernote-css}" />
    <style>
        .form-radio {
            margin-right: 5px;
            padding: 5px 5px 5px 0;
        }
        .form-radio span{
            display: inline-block;
            margin-left: 2px;
            vertical-align: 2px;
        }
    </style>
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
    <form class="form-horizontal m" id="form-node-edit" th:object="${courseNode}">
        <!--父级ID-->
        <input id="nodeId" name="nodeId" type="hidden" th:value="*{nodeId}"/>
        <input id="sellType" name="sellType" type="hidden" th:value="${sellType}"/>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">章节名称</label>
            <div class="col-sm-6">
                <input id="titleName" name="name" th:value="*{name}" class="form-control" value="新创建节点" type="text" required>
            </div>
        </div>
        <!--节点类型——课件 -->
        <div id="sellType-node" style="display: none;">
            <div class="form-group row">
                <label class="col-sm-2 col-form-label is-required text-sm-right">课件类型</label>
                <div class="col-sm-3">
                    <select id="fileType" name="fileType" onchange="selectFileType(this)" class="form-control m-b valid" required="" aria-invalid="false">
                        <option value="VIDEO" th:selected="${courseNode.fileType == 'VIDEO'}">视频</option>
                        <option value="AUDIO" th:selected="${courseNode.fileType == 'AUDIO'}">音频</option>
                        <option value="TXT" th:selected="${courseNode.fileType == 'TXT'}">文本</option>
                    </select>
                </div>
            </div>
            <!--选择视频默认-->
            <div class="form-group row" id="video_type">
                <label class="col-sm-2 col-form-label text-sm-right">音/视频类型</label>
                <div class="col-sm-3">
                    <label class="form-radio">
                        <input type="radio"  value="ALIYUNVIDEO" name="videoType">
                        <span>阿里云</span>
                    </label>
                    <label class="form-radio">
                        <input type="radio"  value="BAIJIAYUN"  name="videoType">
                        <span>百家云</span>
                    </label>
                </div>
            </div>
            <div class="form-group row" id="node-video">
                <label class="col-sm-2 col-form-label is-required text-sm-right">视/音频id</label>
                <div class="col-sm-3">
                    <input id="videoId" name="nodeKey" th:value="*{nodeKey}"  class="form-control" type="text" required>
                </div>
                <div class="col-sm-2">
                    <label for="aliyunfile" class="btn btn-sm btn-danger"><i class="fa fa-file-audio-o"></i> 上传视/音频</label>
                    <input type="file" onchange="uploadVideoOrAudio()" style="display: none" value="" name="file" id="aliyunfile" accept="video/*"/>
                </div>
            </div>
            <div class="form-group row" id="video-duration">
                <label class="col-sm-2 col-form-label is-required text-sm-right">时长</label>
                <div class="col-sm-2">
                    <input id="duration" name="durations" th:value="*{durations}"  class="form-control" type="text">
                </div>
            </div>
            <!--选择文本-->
            <div class="form-group row" id="node-text" style="display: none">
                <label class="col-sm-2 col-form-label text-sm-right">文本内容</label>
                <div class="col-sm-8">
                    <input id="noticeContent" name="content" th:value="*{content}" type="hidden" disabled="disabled">
                    <div id="editor" class="summernote" th:text="*{content}"></div>
                </div>
            </div>
        </div>

        <!--节点类型——直播 -->
        <div id="sellType-live" style="display: none">
            <input name="liveYesNot" value="1"  type="hidden" disabled="disabled">
            <div class="form-group row">
                <label class="col-sm-2 col-form-label text-sm-right">直播地址</label>
                <div class="col-sm-3">
                    <input id="liveUrl" name="nodeKey" th:value="*{nodeKey}" class="form-control" type="text" disabled="disabled">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label text-sm-right">直播开始时间</label>
                <div class="col-sm-3">
                    <div class="input-group date">
                        <input id="liveBeginTime" autocomplete="off"  name="liveBeginTime" th:value="${#strings.replace(courseNode.liveBeginTime,'T',' ')}"  class="form-control" placeholder="yyyy-MM-dd" type="text" disabled="disabled">
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label text-sm-right">直播结束时间</label>
                <div class="col-sm-3">
                    <div class="input-group date">
                        <input id="liveEndTime" autocomplete="off"  name="liveEndTime" th:value="${#strings.replace(courseNode.liveEndTime,'T',' ')}" class="form-control" placeholder="yyyy-MM-dd" type="text" disabled="disabled">
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label text-sm-right">直播供应商</label>
                <div class="col-sm-3">
                    <select name="supplier" class="form-control m-b">
                        <option value="baiJiaYun" selected="selected">百家云</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label text-sm-right">创建直播课堂</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <a onclick="liveAdd()" href="javascript:void(0);" class="btn btn-sm btn-info" >
                            <i class="fa fa-plus"></i> 创建
                        </a>&nbsp
                        <a id="LiveUpdata"  onclick="liveUpdata()" href="javascript:void(0);" class="btn btn-success btn-sm">
                            <i class="fa fa-edit"></i> 修改
                        </a>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label text-sm-right">房间类型</label>
                <div class="col-sm-3">
                    <select name="openType" class="form-control m-b">
                        <option value="WEB">网页版</option>
                        <!-- <option value="APP" disabled="disabled">客户端</option>-->
                    </select>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">排序</label>
            <div class="col-sm-2">
                <input  name="sort" th:value="*{sort}" class="form-control" type="text" >
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">属性</label>
            <div class="col-sm-3">
                <label style="margin-top: 7px;" for="free"><input type="checkbox" value="1" name="free" id="free" th:checked="*{free==1}"> 免费</label>
            </div>
        </div>
    </form>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: datetimepicker-js}" />
<th:block th:insert="~{include :: summernote-js}" />
<script type="text/javascript">
    var prefix = "/course/node";
    $(":radio[name='videoType'][value='[[${courseNode.videoType}]]']").prop("checked", "checked");
    $(":radio[name='nodeType'][value='"+[[${courseNode.nodeType}]]+"']").prop("checked", "checked");
    $(function () {
        var teacherId = $("#teacherId").val();
        if(teacherId > 0){
            $("#LiveSelect").remove();
            $("#LiveUpdata").remove();
            $("#intoLive").show();
        }
        /* 这段好像没用
        var videoType = $('input:radio[name="videoType"]:checked').val();
        if(videoType=="ALIYUNVIDEO") {//阿里云视频
            $("#audiourl-type").hide();
            $("#videourl-type").hide();
        }else if(videoType=="BAIJIAYUN"){
            $("#audiourl-type").hide();
            $("#videourl-type").hide();
        }
*/
    })


    $(function() {
        $('.summernote').summernote({
            placeholder: '请输入内容',
            height : 192,
            lang : 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
        });
        var content = $("#noticeContent").val();
        $('#editor').summernote('code', content);
    });

    // 上传文件
    function sendFile(file, obj) {
        var data = new FormData();
        data.append("file", file);
        $.ajax({
            type: "POST",
            url: "/upload/image.json",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(result) {
                if (result.code === 0) {
                    $(obj).summernote('editor.insertImage', result.data.src, result.data.title);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });
    }

    $("input[name='liveBeginTime']").datetimepicker({
        format:'Y-m-d H:i:00',
        formatDate:'Y-m-d',
        formatTime:'H:i:00',
        step: 5
    });

    $("input[name='liveEndTime']").datetimepicker({
        format:'Y-m-d H:i:00',
        formatDate:'Y-m-d',
        formatTime:'H:i:00',
        step: 5
    });


    $(function () {
        var fileType = $("#fileType").val();
        var sellType = $("#sellType").val();
        if(sellType=="COURSE"){//课程
            $("#sellType-node").show();
            $("#video-duration").show();
            $("#sellType-live").hide();
            publicJs(fileType);
        }else if(sellType=="LIVE"){
            $("#sellType-node").hide();
            $("#sellType-live").show();
            $("#node-video").find(":input").attr("disabled", true);
            $("#node-text").find(":input").attr("disabled", true);
            $("#sellType-live").find(":input").attr("disabled", false);
        }
    })


    //课件类型选择控件
    function selectFileType(obj){
        var fileType = obj.options[obj.selectedIndex].value;
        publicJs(fileType);
    }

    //选择视频类型控件
    $("input[name='videoType']").bind("click",function() {
        var videoType = $('input:radio[name="videoType"]:checked').val();
        $("#videoId").val("");
        $("#videoId-audio").val("");
        /*
        if(videoType=="ALIYUNVIDEO") {//阿里云视频
            $("#audiourl-type").hide();
            $("#videourl-type").hide();
        }else if(videoType=="BAIJIAYUN"){
            $("#audiourl-type").hide();
            $("#videourl-type").hide();
        }*/
    });

    //初始化公用函数
    function publicJs(obj) {
        var fileType = obj ;
        if(fileType=="VIDEO"||fileType=="AUDIO"){//选择了视频
            $("#node-video").show();
            $("#video_type").show();
            $("#video-duration").show();
            $("#node-text").hide();
            $("#node-video").find(":input").attr("disabled", false);
            $("#node-text").find(":input").attr("disabled", true);
        }else if(fileType=="TXT"){
            $("#video_type").hide();
            $("#node-video").hide();
            $("#video-duration").hide();
            $("#node-text").show();
            $("#node-video").find(":input").attr("disabled", true);
            $("#node-text").find(":input").attr("disabled", false);
        }
    }

    /**
     * 阿里云选择视频
     **/
    function uploadVideoOrAudio (){
        var videoType = $("input[name='videoType']:checked").val();
        var titleName = $("#titleName").val();
        var file = $('#aliyunfile')[0].files[0];
        var fileurl = URL.createObjectURL(file);
        var audioElement = new Audio(fileurl);
        audioElement.addEventListener("loadedmetadata", function (_event) {
            $("#duration").val(Math.round(audioElement.duration));
        });
        var formData = new FormData();
        formData.append("file",file);
        formData.append("title",titleName);
        var index = layer.load(1, {
            shade: [0.3,'#666'] //0.1透明度的白色背景
        });
        if(videoType=="ALIYUNVIDEO"){//阿里云视频
            $.ajax({
                url: prefix + "/upload/aliyun.json",
                data: formData,
                type: "post", dataType: "json",
                processData: false, contentType: false,
                mimeType: "multipart/form-data",
                success: function (data) {
                    layer.close(index);
                    if (data.code === 0) {
                        $("#videoId").val(data.msg);
                    } else {
                        return layer.alert('文件上传失败：' + data.msg)
                    }
                }
            });
        }else if(videoType=="BAIJIAYUN"){//百家云视频
            $.post(prefix + "/upload/baijiayun.json", {'title':titleName}, function (json) {
                if (json.code === 0) {
                    $.ajax({
                        url: json.data.upload_url,
                        data: formData,
                        type: "post", dataType: "json",
                        processData: false, contentType: false,
                        mimeType: "multipart/form-data",
                        success: function (ret) {
                            console.log(ret)
                            layer.close(index);
                            if (ret.code === 1) {
                                $("#videoId").val(ret.fid);
                            } else {
                                return layer.alert('文件上传失败：' + ret.msg)
                            }
                        }
                    });
                } else {
                    $.modal.msgError(json.msg)
                    setTimeout(function () {
                        layer.close(index);
                    }, 1200);
                }
            });
        }
    }

    //添加直播窗口
    function liveAdd(){
        layer.open({
            type: 2,
            area: ['600px', '420px'],
            fix: false,
            maxmin: true,
            shade: 0.3,
            title: "添加直播",
            content: "/course/node/live/add.html",
            shadeClose: true
        });
    }

    //修改直播窗口
    function liveUpdata() {
        var roomId = $("#liveUrl").val();
        layer.open({
            type: 2,
            area: ['600px', '420px'],
            fix: false,
            maxmin: true,
            shade: 0.3,
            title: "修改直播",
            content: "/course/node/live/edit.html?roomId=" + roomId,
            shadeClose: true
        });
    }

    $("#form-node-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        var sHTML = $('.summernote').summernote('code');
        $("#noticeContent").val(sHTML);
        if ($.validate.form()) {
            $.operate.save(prefix + "/save.json", $('#form-node-edit').serialize());
        }
    }

</script>
</body>
</html>